/******************************************************************
  Theme Name: iBlogfolio for iPhone
  Theme URI: http://adanarchila.com
  Description: Nice and clean dark theme for application developers or mobile sites.
  Author: Adan Archila
  Author URI: http://adanarchila.com
******************************************************************/ 

/******************************************************************
  CSS global reset
******************************************************************/

/******************************************************************
  Main Settings
******************************************************************/
#wrap {
  width:320px;
  margin:0 auto;
}

#header {
  width:320px;
  height:150px;
  background:url(../images/bgheader.jpg) no-repeat top center;
}

#navigation{
  width:279px;
  height:49px;
  background:url(../images/bgmenu.png) no-repeat top center;
  margin:0 auto;
  position:relative;
}

#breadcrumb{
  width:280px;
  margin:-25px auto 0 auto;
  background:url(../images/breadcrumb.jpg) repeat-x top center;
  height:37px;
  -webkit-border-radius:2px;
  -webkit-box-shadow:0 1px 2px #2b2a2a; 
}

#slideshow{
  width:280px;
  margin:-23px auto 0 auto;
}

#posts{
  width:280px;
  margin:10px auto;
}

#page-navigation{
  width:280px;
  margin:10px auto 5px auto;
  position:relative;
}

#comments{
  width:280px;
  margin:20px auto 10px auto;
  position:relative;  
}

#map{
  width:280px;
  margin:0 auto 10px auto;
  position:relative;  
}

#tweet{
  width:280px;
  margin:0 auto 10px auto;
  position:relative;  
}

#flickr{
  width:280px;
  margin:10px 0 15px 20px;
  float:left;
  display:block;
}

#footer{
  width:280px;
  margin:0 0 15px 20px;
  float:left;
  display:block;
  background:#2f2f2f;
  -webkit-box-shadow:inset 0 0 15px #191919;
  -webkit-border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  text-align:center;
  padding:10px 0 0 0;
}

/******************************************************************
  Navbar style settings
******************************************************************/

#menu{
  padding:7px 0 0 10px;
}

  #menu ul, span.arrow-dir{
    display:none;
  }

  #menu ul{
    position:absolute;
    top:39px;
    left:11px;
    width:122px;
    padding:5px 0 0 0;
    background:#dedede ;
    border-right:1px solid #e9e9e9;
    border-left:1px solid #e9e9e9;
    border-bottom:1px solid #e9e9e9;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-box-shadow: 0 10px 15px #2a2a2a;
    z-index:999;
  }
  
    #menu ul li.dropdown{
      position:relative;
    }
  
    #menu ul li > ul{
      position:absolute;
      top:-5px;
      left:135px;
      width:110px;
      padding:5px 0 0 0;
      background:#dedede ;
      border-right:1px solid #e9e9e9;
      border-left:1px solid #e9e9e9;
      border-bottom:1px solid #e9e9e9;
      -webkit-border-radius:5px;
      -webkit-box-shadow: 0 10px 15px #2a2a2a;
      z-index:999;
    }
    
    #menu .arrow-dir{
      display:block;
      width:4px;
      height:7px;
      position:absolute;
      top:8px;
      left:131px;
      background:url(../images/arrowdir.png) no-repeat top center;
    }
  
  #menu ul li a{
    color:#3f3f3f;
    font-size:11px;
    text-decoration:none;
    line-height:25px;
    padding:0 10px 0 16px;
    text-shadow:1px 1px #fff;
    display:block;
    background:url(../images/separator.png) no-repeat bottom center;
  }
  
  #menu ul li:last-child{
    padding-bottom:5px;
  }
  
  #menu ul li:last-child > a, #menu ul li ul li:last-child > a{
    background:none;
  }
  
    #menu ul li a .dir{
      background:url(../images/dir.png) no-repeat right center;
      line-height:25px;
      float:right;
      width:3px;
      height:5px;
      padding:17px 0 0 0;
      display:block;
    }
  
  a.expand-nav, a.collapse-nav{
    width:110px;
    height:25px;
    float:left;
    display:block;
    color:#3f3f3f;
    text-decoration:none;
    padding:11px 0 0 16px;
    font-size:12px;
    text-shadow:1px 1px #fff;
  }
  
  a.expand-nav{
    background:url(../images/navbtn.png) no-repeat top center;
  }
  
  a.collapse-nav{
    background:url(../images/navbtn.png) no-repeat bottom center;
  }

#social{
  width:66px;
  float:right;
  display:block;
  padding:8px 10px 0 0;
}

  #social li a{
    background:url(../images/social.png);
    width:16px;
    height:16px;
    float:left;
    display:block;
    margin-right:7px;
    text-indent:-9999em;
  }
  
  #social li:last-child a{
    margin-right:0px;
  }
  
  #social li.facebook a{
    background-position:0 0;
  }
  
  #social li.rss a{
    background-position:0 16px;
  } 
  
  #social li.twitter a{
    background-position:0 32px;
  }

/******************************************************************
  Logo and Search Box style settings
******************************************************************/

#logo{
  width:110px;
  float:left;
  display:block;
  height:30px;
  padding:28px 0 0 36px;
}
  
  #logo h1{
    font-weight:normal;
    font-size:24px;
    font-family:"Trebuchet MS", Helvetica, Arial;
  }
  
  #logo h1 a{
    color:#ebebeb;
    text-decoration:none;
    text-shadow:2px 2px #000;
  }

#searchbox{
  width:38px;
  float:right;
  height:32px;
  display:block;
  position:relative;
  padding:24px 32px 0 0;
}

  #searchbtn{
    width:35px;
    height:30px;
    float:left;
    display:block;
    background:url(../images/searchbtn.png) no-repeat top center;
    text-indent:-9999em;
  }

  #searchform{
    position:absolute;
    top:24px;
    left:-190px;
    display:none;
  }
  
    #searchform input{
      height:28px;
      background:#e3e3e3;
      width:160px;
      -webkit-border-radius:5px;
      -webkit-box-shadow: 0 2px 5px #2a2a2a;
      padding:0 10px 0 10px;
      border:0;
    }

/******************************************************************
  Breadcrumb style settings
******************************************************************/

#breadcrumb ul li{
  display:inline-block;
  background:url(../images/bc-line.png) no-repeat right center;
  height:34px;
  line-height:34px;
  padding:0 20px 0 8px;
  margin:2px 0 0 0;
  text-transform:uppercase;
  color:#515151;
}

#breadcrumb a{
  text-transform:uppercase;
  color:#515151;
  text-decoration:none;
}

#breadcrumb a.home{
  width:11px;
  height:10px;
  display:inline-block;
  background:url(../images/home.png) no-repeat top center;
  text-indent:-9999em;
  margin-left:8px;
}

    
/******************************************************************
  Slideshow style settings
******************************************************************/


.rounded-img {
  display: inline-block;
  overflow: hidden;
  -webkit-border-radius: 7px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  width: 279px; 
  height: 175px;
}

#slider{
  width:279px;
  height:175px;
  overflow:hidden;
}

  #slider a{
    position:relative;
    text-decoration:none;
  }

  .label{
    position:absolute;
    bottom:0;
    left:0;
    background:url(../images/bgtrans.png) repeat;
    width:260px;
    height:22px;
    display:block;
    -webkit-border-bottom-left-radius:7px;
    -webkit-border-bottom-right-radius:7px;
    padding:11px 10px 5px 10px;
    text-align:right;
    color:#fff;
    text-shadow:1px 1px 2px #000;
    font-size:14px;
  }

.slider-nav{
  width:251px;
  height:20px;
  padding:10px 16px 0 15px;
  margin:10px 0 0 0;
  background:url(../images/slidernav.png) no-repeat 0 0;
}

  .prev-nav{
    float:left;
    display:inline-block;
    width:10px;
    height:13px;
  }
  
    .prev-nav a{
      float:left;
      display:block;
      width:10px;
      height:13px;
      background:url(../images/slidernav.png) 0 -29px no-repeat;
      text-indent:-9999em;
    }
    
  .next-nav{
    float:right;
    display:inline-block;
    width:10px;
    height:13px;
  }
  
    .next-nav a{
      float:right;
      display:block;
      width:10px;
      height:13px;
      background:url(../images/slidernav.png) -13px -29px no-repeat;
      text-indent:-9999em;
    }   
    
  .main-nav{
    text-align:center;
    display:inline-block;
    width:224px;
  } 
    
    .main-nav ul li{
      display:inline-block;
      margin-right:5px;
    }
    
      .main-nav ul li:last-child{
        margin-right:0px;
      }
    
    .main-nav ul li a{
      display:inline-block;
      width:13px;
      height:13px;
      background:url(../images/slidernav.png) -22px -29px no-repeat;
    }
    
      .main-nav ul li.activeLI a{
        background:url(../images/slidernav.png) -35px -29px no-repeat;
      }

/******************************************************************
  Posts style settings
******************************************************************/

.post{
  width:280px;
  margin:0 auto 10px auto;
}

  .post-title{
    width:100%;
    background:url(../images/bgpost-title.jpg) repeat-x top center;
    height:38px;
    -webkit-border-radius:2px;
    display:inline-block;
    -webkit-box-shadow:0 1px 2px #2b2a2a;
    z-index:5;
  }
  
    .post-title h2{
      color:#717171;
      font-size:14px;
      text-shadow:0 1px #fff;
      text-transform:uppercase;
      font-weight:normal;
      font-size:14px; 
      line-height:38px;
      float:left;
      display:block;
      padding:0 0 0 22px;
    }
  
    .post-title h2 a{
      color:#717171;
      font-size:14px;
      text-shadow:0 1px #fff;
      text-decoration:none;
      text-transform:uppercase;
      font-weight:normal;
      font-size:14px;
      line-height:38px;
      float:left;
      display:block;
      word-spacing:-1px;
    }
    
    .post-title a.less{
      width:14px;
      height:15px;
      float:right;
      display:block;
      background:url(../images/post-less.png) no-repeat top center;
      margin:12px 15px 0 0;
    }
    

  
  .post-content{
    background:#535252;
    -webkit-box-shadow:inset 0 0 15px #323232;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    z-index:4;
    padding:10px 10px 15px 10px;
    overflow:auto;
    display:none;
  }
  
  .show-post{
    display:block!important;
  }
  
    .post-meta{
      background:url(../images/post-line.png) no-repeat bottom center;
      padding:0 0 15px 0;
      margin:0 0 10px 0;
      overflow:auto;
    }
    
    .hr{
      background:url(../images/post-line.png) no-repeat bottom center;
      margin:10px auto;
      width:100%;
      height:2px;
    }
    
    .hr-light{
      background:url(../images/hr-light.png) no-repeat bottom center;
      margin:18px auto;
      width:100%;
      height:2px;
    }
    
      a.imgbox{
        float:left;
        display:block;
        border:2px solid #fff;
        -webkit-border-radius:3px;
        -webkit-box-shadow:0 0 4px #000;
        width:101px;
        height:70px;
        margin:0 17px 5px 0!important;
      }
      
      a.imgbox img{
        border:0;
      }
      
      .post-meta p{
        color:#adadad;
        font-size:11px;
        text-shadow:1px 2px #2c2c2c;
        line-height:18px;
        margin:1px 0 0 0!important;
      }
      
      .post-meta p.grey{
        color:#adadad;
      }
      
      .post-meta a, .post-meta span{
        color:#fff;
        text-decoration:none;
        text-shadow:1px 2px #2c2c2c!important;
        margin-left:5px;
        font-size:11px;
        line-height:18px;
      }
      
      .post-meta a.comments-bubble{
        width:79px;
        height:20px;
        float:left;
        display:block;
        background:url(../images/comment-bubble.png) no-repeat top center;
        color:#ddd;
        font-size:11px;
        padding:4px 0 0 10px;
        margin:10px 0 0 0;
      }
      
    .post-content p{
      color:#e0e0e0;
      font-size:11px;
      text-shadow:1px 2px #2c2c2c;
      line-height:18px;
      margin:0 0 20px 5px;
    }
    
      .post-content a.morebtn{
        float:left;
        display:block;
        width:75px;
        height:20px;
        background:url(../images/btnmore.jpg) repeat-x top center;
        -webkit-border-radius:3px;
        -webkit-box-shadow:0 0 4px #000;
        color:#676767;
        text-shadow:1px 1px #fff;
        font-size:11px;
        text-decoration:none;
        text-transform:uppercase;
        padding:9px 0 0 10px;
        margin:7px 0 0 5px;
      }
      
      .post-content a.hirebtn{
        float:left;
        display:block;
        width:55px;
        height:20px;
        background:url(../images/btnmore.jpg) repeat-x top center;
        -webkit-border-radius:3px;
        -webkit-box-shadow:0 0 4px #000;
        color:#676767;
        text-shadow:1px 1px #fff;
        font-size:11px;
        text-decoration:none;
        text-transform:uppercase;
        padding:9px 0 0 10px;
        margin:7px 0 0 5px;
      } 

/******************************************************************
  Skills Table style settings
******************************************************************/

table.skills{
  margin-bottom:15px;
}

table.skills p{
  margin:0;
}     
          
table.skills td{
  padding:2px;
}         
          
table.skills td.skill-title{
  width:90px;
}         

ul.ul-skill li{
  display:inline-block;
  margin-right:6px;
  width:11px;
  height:11px;
  background:url(../images/skills.png);
}

ul.ul-skill li.active{
  background:url(../images/skills.png) top center no-repeat;
}
  
ul.ul-skill li.deactive{
  background:url(../images/skills.png) bottom center no-repeat;
}         

/******************************************************************
  Contact Page style settings
******************************************************************/

.contact-form dl dt{
  width:55px;
  float:left;
  display:block;
  min-height:28px;
  line-height:28px;
  margin-right:5px;
  text-shadow:1px 2px #2c2c2c;
}

.contact-form dl dd{
  width:190px;
  float:left;
  display:block;
  min-height:28px;
  margin-left:7px;
}


.contact-form .send-btn{
  float:right;
  display:block;
  width:75px;
  height:29px;
  border:0;
  background:url(../images/btnmore.jpg) repeat-x top center;
  -webkit-border-radius:3px;
  -webkit-box-shadow:0 0 4px #000;
  color:#676767;
  text-shadow:1px 1px #fff;
  font-size:11px;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  margin:7px 3px 0 5px;
  cursor:pointer;
}

.contact-form input.txt{
  width:178px;
  height:25px;
  background:url(../images/contact-input.png) repeat-x top center;
  border:0;
  margin-bottom:6px;
  padding:0 5px;
  color:#fff;
}

.contact-form .msj{
  background:url(../images/contact-textarea.png) repeat-x top center;
  width:178px;
  height:76px;
  border:0;
  padding:5px;
  color:#fff;
}
      
#map img{
  border:3px solid #fff;
  border-radius:5px;
  -webkit-border-radius:5px;
}


/******************************************************************
  Single Post style settings
******************************************************************/

a.featbox{
  
  display:block;
  border:2px solid #fff;
  -webkit-border-radius:3px;
  -webkit-box-shadow:0 0 4px #000;
  margin:0 auto;
}

a.featbox img{
  border:0;
}
      
/******************************************************************
  Comments style settings
******************************************************************/   

.comment{
  margin-bottom:15px;
  min-height:90px;
  position:relative;
} 

  .comment-author{
    float:left;
    display:block;
    width:56px;
    margin-right:13px;
  }
    
    a.author img{
      border:3px solid #fff;
      border-radius:5px;
      -webkit-border-radius:5px;
      margin-bottom:10px;
    }
    
    .comment-author p{
      color:#fff;
      text-transform:uppercase;
      text-shadow:1px 1px  #646464;
      font-weight:bold;
      margin:0 0 5px 3px;
    }
    
    .comment-author a{
      color:#bababa;
      font-style:italic;
      text-shadow:1px 1px  #646464;
      text-decoration:none;
    }
  
  
  .comment-text{
    float:left;
    display:block;
    width:211px;
  }
  
    .comment-cloud{
      background:#636262;
      padding:14px 10px;
      float:left;
      display:block;
      -webkit-box-shadow:inset 0 0 15px #595959;
      -webkit-border-radius:5px;
    }
    
      .comment-cloud p{
        text-shadow:1px 2px #494949;
        line-height:18px;
      }
      
    .comment-text .reply{
      color:#fff;
      text-shadow:1px 1px  #646464;
      float:right;
      text-transform:uppercase;
      text-decoration:none;
      margin:10px 0 0 0;
    }
    
  .comment-arrow{
    width:4px;
    height:7px;
    background:url(../images/comment-arrow.png) no-repeat top center;
    position:absolute;
    top:22px;
    left:65px;
  }   
  
.comment-form{
  overflow:auto;
} 
  
.comment-form dl dt{
  width:55px;
  float:left;
  display:block;
  min-height:28px;
  line-height:28px;
  margin-right:28px;
  text-shadow:1px 2px #646464;
  text-transform:uppercase;
}

.comment-form dl dd{
  width:190px;
  float:left;
  display:block;
  min-height:28px;
  margin-left:7px;
}

.comment-form .send-btn{
  float:right;
  display:block;
  width:75px;
  height:29px;
  border:0;
  background:url(../images/btnmore.jpg) repeat-x top center;
  -webkit-border-radius:3px;
  -webkit-box-shadow:0 0 4px #000;
  color:#676767;
  text-shadow:1px 1px #fff;
  font-size:11px;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  margin:7px 2px 0 5px;
  cursor:pointer;
}

.comment-form input.txt{
  width:180px;
  height:26px;
  background:url(../images/comment-input.png) repeat-x top center;
  border:0;
  margin-bottom:6px;
  padding:0 5px;
  color:#fff;
}

.comment-form .msj{
  background:url(../images/comment-textarea.png) repeat-x top center;
  width:180px;
  height:57px;
  border:0;
  padding:5px;
  color:#fff;
} 


/******************************************************************
  Portfolio style settings
******************************************************************/

.portfolio-content{
  display:none;
  min-height:325px;
}

  .portfolio-slide{
    min-height:290px;
    margin-bottom:10px;
  }

  .portfolio-item{
    padding:10px 0;
  }

    .portfolio-item .brief-arrow{
      margin:10px auto 0 auto;
      width:7px;
      height:4px;
      background:url(../images/brief-arrow.png) repeat-x top center;
    }

    .portfolio-item .brief{
      background:#646363;
      padding:13px 16px;
      float:left;
      display:block;
      -webkit-box-shadow:inset 0 0 10px #555;
      -webkit-border-radius:5px;
    }
    
      .portfolio-item .brief h2{
        color:#fff;
        text-shadow:1px 2px #494949;
        font-size:12px;
        text-transform:uppercase;
        font-weight:normal;
        margin-bottom:10px;
      }
      
      .portfolio-item .brief p{
        color:#fff;
        text-shadow:1px 2px #494949;
        line-height:14px;
      }
        
/******************************************************************
  Page Navigation style settings
******************************************************************/

#page-navigation a{
  display:block;
  font-size:11px;
  text-decoration:none;
}

  a.grey-page{
    background:url(../images/page-grey.png) no-repeat top center;
    height:23px;
    width:22px;
    color:#fff;
    line-height:23px;
    text-align:center;
    position:absolute;
  }
  
  a.prev-page{
    top:0; left:0;
  }
  
  a.next-page{
    right:0;top:0;
  }
  
  #page-nav{
    display:block;
    text-align:center;
  }
  
    #page-nav li{
      display:inline-block;
    }
    
      #page-nav li a{
        width:24px;
        height:24px;
        background:url(../images/page-nav.png) no-repeat top center;
        line-height:24px;
        text-align:center;
        color:#6c6c6c;
        text-shadow:1px 1px #fff;
      }
      
        #page-nav li.active-page a{
          background:url(../images/page-active.png) no-repeat top center;
        }
        
/******************************************************************
  Twitter style settings
******************************************************************/

.tweet-bird{
  float:left;
  display:block;
  width:83px;
  height:88px;
  margin:0 5px 0 10px;
}   

.tweet-last{
  background:#6c6c6c;
  padding:10px 15px 10px 15px;
  width:151px;
  float:left;
  display:block;
  margin:20px 0 0 0;
  -webkit-box-shadow:inset 0 0 15px #595959;
  -webkit-border-radius:5px;
}

  .tweet-last p, .tweet-last a{
    color:#fff;
    text-shadow:1px 1px #000;
    font-size:11px;
    line-height:18px;
    text-decoration:none;
  }
  
  .tweet-last a{
    font-weight:bold;
  }

.tweet-arrow{
  width:4px;
  height:7px;
  background:url(../images/tweet-arrow.png) no-repeat top center;
  position:absolute;
  top:45px;
  left:95px;
}

/******************************************************************
  Flickr style settings
******************************************************************/

#flickr ul{
  margin:10px 0 0 0;
}

#flickr ul li{
  display:inline-block;
  margin-right:6px;
}

  #flickr ul li:last-child{
    margin-right:0;
  }

#flickr ul li a img{
  border:3px solid #fff;
  -webkit-border-radius:3px;
}

/******************************************************************
  Footer style settings
******************************************************************/

#footer p{
  font-size:11px;
  color:#717171;
  text-shadow:1px 1px #000;
  line-height:24px;
  text-align:center;
}

#footer p a{
  color:#fff;
  text-decoration:none;
  line-height:24px;
}

#footer a.top{
  font-size:11px;
  color:#717171;
  text-shadow:1px 1px #000;
  line-height:14px;
  text-align:center;  
  text-decoration:none;
  background:url(../images/top.png) no-repeat left center;
  padding:0 0 0 12px;
}
